<template>
  <div class="dashboard-container">
    <div class="grid-box">
      <el-row :gutter="20">
        <el-col :span="6" :xs="24" :sm="12" :lg="6" :xl="6">
          <div class="grid-content bg-blue">
            <div class="title">
              <span>健身房总人数</span>
            </div>
            <div class="content">
              <span> {{ number }} 人</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6" :xs="24" :sm="12" :lg="6" :xl="6">
          <div class="grid-content bg-yellow">
            <div class="title">
              <span>员工人数</span>
            </div>
            <div class="content">
              <span> {{ number }} 人</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6" :xs="24" :sm="12" :lg="6" :xl="6">
          <div class="grid-content bg-green">
            <div class="title">
              <span>会员人数</span>
            </div>
            <div class="content">
              <span> {{ number }} 人</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6" :xs="24" :sm="12" :lg="6" :xl="6">
          <div class="grid-content bg-red">
            <div class="title">
              <span>器材数</span>
            </div>
            <div class="content">
              <span> {{ number }} 件</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="echart-box">
      <el-row :gutter="20">
        <el-col :span="6" :xs="24" :sm="24" :lg="12" :xl="12">
          <el-card class="card">
            <lineChart></lineChart>
          </el-card>
        </el-col>
        <el-col :span="6" :xs="24" :sm="24" :lg="12" :xl="12">
          <el-card class="card">
            <barChart></barChart>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import barChart from './components/barChart.vue'
import lineChart from './components/lineChart.vue'
export default {
  name: 'Dashboard',
  components: {
    barChart,
    lineChart
  },
  data() {
    return {
      number: 3
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.dashboard-container {
  .grid-box {
    .grid-content {
      border-radius: 6px;
      margin: 10px 0;
      color: white;
      font-weight: bolder;

      .content {
        background-color: rgba(0, 0, 0, 0.03);
        border-top: 1px solid rgba(0, 0, 0, 0.125);
        padding: 10px 15px;
      }

      .title {
        padding: 20px 15px;
      }
    }

    .bg-blue {
      background-color: #0d6efd !important;
    }

    .bg-yellow {
      background-color: #ffc107 !important;
    }

    .bg-green {
      background-color: #198754 !important;
    }

    .bg-red {
      background-color: #dc3545 !important;
    }
  }
  .echart-box{
    .card{
      margin-top: 20px;
    }
  }
}
</style>
